<template>
  <div class="welcome-container">
    <!-- 欢迎信息 -->
    <div class="welcome-header">
      <h1>欢迎回来，{{ userName }}！</h1>
      <p>请选择以下功能开始操作：</p>
    </div>

    <!-- 功能卡片 -->
    <div class="function-cards">
      <!-- 销售订单管理 -->
      <el-card class="card" @click="goToSalesOrderManagement">
        <div class="card-content">
          <el-icon :size="40" class="icon"><TrendCharts /></el-icon>
          <h3>销售订单管理</h3>
          <p>查看和管理销售订单</p>
        </div>
      </el-card>
      <!-- 货物报损管理 -->
      <el-card class="card" @click="goToCountStock">
        <div class="card-content">
          <el-icon :size="40" class="icon"><Edit/></el-icon>
          <h3>库存盘点</h3>
          <p>录入盘点数据</p>
        </div>
      </el-card>
      <!-- 货物报损管理 -->
      <el-card class="card" @click="goToDamageReportManagement">
        <div class="card-content">
          <el-icon :size="40" class="icon"><Warning /></el-icon>
          <h3>货物报损管理</h3>
          <p>处理药品报损申请</p>
        </div>
      </el-card>

    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { TrendCharts, Warning } from '@element-plus/icons-vue';

const router = useRouter();
const user = JSON.parse(localStorage.getItem('system-user') || {});
const userName = ref(user.name || '员工');

// 跳转到销售订单管理页面
const goToSalesOrderManagement = () => {
  router.push('/SELLER/order');
};

// 跳转到货物报损管理页面
const goToDamageReportManagement = () => {
  router.push('/SELLER/damageReport');
};

// 跳转到库存盘点页面
const goToCountStock = () => {
  router.push('/SELLER/countStock');
};
</script>

<style scoped>
.welcome-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.welcome-header {
  text-align: center;
  margin-bottom: 40px;
}

.welcome-header h1 {
  font-size: 28px;
  color: #1967e3;
  margin-bottom: 10px;
}

.welcome-header p {
  font-size: 16px;
  color: #666;
}

.function-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.card {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-content {
  text-align: center;
  padding: 20px;
}

.card-content .icon {
  color: #1967e3;
  margin-bottom: 15px;
}

.card-content h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

.card-content p {
  font-size: 14px;
  color: #666;
}
</style>
